<template>
	<view class="container">
		<!-- 波浪背景 -->
		<view class="wave-bg">
			<svg viewBox="0 0 1200 120" preserveAspectRatio="none">
				<path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.21,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" fill="#4a8fe7"></path>
				<path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity=".5" fill="#4a8fe7"></path>
				<path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" fill="#4a8fe7"></path>
			</svg>
		</view>
		
		<!-- 主要内容 -->
		<view class="content">
			<!-- 统计卡片 -->
			<view class="stats-card animate__animated animate__fadeInDown">
				<text class="stats-title">学生总数</text>
				<text class="stats-value">{{ data.length }}人</text>
			</view>
			
			<!-- 扇形图 -->
			<view class="chart-container animate__animated animate__fadeIn">
				<qiun-data-charts 
					type="pie"
					:chartData="chartData"
					:opts="chartOptions"
					canvasId="pieChart"
					canvas2d
				/>
			</view>
			
			<!-- 年级统计 -->
			<view class="grade-container animate__animated animate__fadeInUp">
				<text class="section-title">年级分布</text>
				<view class="grade-grid">
					<view 
						v-for="(count, grade) in gradeCount" 
						:key="grade" 
						class="grade-card"
						:class="{'active': selectedGrade === grade}"
						@click="showStudents(grade)"
					>
						<text class="grade-name">{{ grade || '未知' }}</text>
						<text class="grade-count">{{ count }}人</text>
					</view>
				</view>
			</view>
			
			<!-- 学生列表 -->
			<view class="student-section" v-if="selectedGrade">
				<view class="section-header">
					<text class="section-title">{{ selectedGrade || '未知' }}的学生信息</text>
					<text class="student-count">{{ filteredStudents.length }}人</text>
				</view>
				
				<view class="student-list">
					<view 
						v-for="(student, index) in filteredStudents" 
						:key="index" 
						class="student-card animate__animated animate__fadeInUp"
						:style="{'animation-delay': `${index * 0.05}s`}"
					>
						<view class="student-index">
							<text>{{ index + 1 }}</text>
						</view>
						<view class="student-avatar">
							<text class="avatar-text">{{ student.studentName.charAt(0) }}</text>
						</view>
						<view class="student-info">
							<text class="name">{{ student.studentName }}</text>
							<text class="phone">{{ student.phoneNumber }}</text>
						</view>
						<view :class="['status-badge', student.isPay ? 'paid' : 'unpaid']">
							{{ student.isPay ? '已缴费' : '未缴费' }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { globalVariable } from '../../configMy.js';
	export default {
		data() {
			return {
				data: [], // 存储所有学生数据
				gradeCount: {}, // 存储每个年级的人数
				selectedGrade: null, // 当前选择的年级
				chartData: {},
				chartOptions: {
					color: ["#4a8fe7", "#6a5acd", "#3aa272", "#f8b445", "#e74c3c", "#9b59b6", "#3498db", "#1abc9c", "#f1c40f", "#e67e22"],
					padding: [10, 10, 10, 10],
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 1,
							borderColor: "#FFFFFF",
							linearType: "custom"
						}
					},
					dataLabel: true,
					dataPointShape: true,
					legend: {
						show: true,
						position: "right",
						lineHeight: 25
					},
					title: {
						name: "年级分布统计",
						fontSize: 16,
						color: "#666666"
					}
				}
			};
		},
		onLoad() {
			this.fetchStudentData();
		},
		computed: {
			// 计算每个年级的学生数量
			computedGradeCount() {
				const counts = {};
				this.data.forEach((student) => {
					const grade = student.grade || '未知';
					if (counts[grade]) {
						counts[grade]++;
					} else {
						counts[grade] = 1;
					}
				});
				return counts;
			},
			// 根据选择的年级过滤学生信息
			filteredStudents() {
				if (this.selectedGrade) {
					return this.data.filter(student => {
						const grade = student.grade || '未知';
						return grade === this.selectedGrade;
					});
				}
				return [];
			}
		},
		watch: {
			// 监视 data 的变化并更新 gradeCount 和图表数据
			data: {
				handler() {
					this.gradeCount = this.computedGradeCount;
					this.updateChartData();
					// 默认选中人数最多的年级
					if (!this.selectedGrade && Object.keys(this.gradeCount).length > 0) {
						this.selectedGrade = Object.entries(this.gradeCount).reduce((a, b) => a[1] > b[1] ? a : b)[0];
					}
				},
				immediate: true,
			},
		},
		methods: {
			fetchStudentData() {
				let that = this;
				uni.showLoading({
					title: '加载中...'
				});
				uni.request({
					url: globalVariable+"/getAllUsers",
					success(data) {
						uni.hideLoading();
						let info = data.data;
						if (info.status == 1) {
							that.data = info.data;
							// uni.showToast({
							// 	title: '数据加载成功',
							// 	icon: "success",
							// 	duration: 1500
							// });
						}
					},
					fail() {
						uni.hideLoading();
						uni.showToast({
							title: "网络错误，请重试",
							icon: "none"
						});
					}
				});
			},
			// 更新图表数据
			updateChartData() {
				const series = [];
				const categories = [];
				
				for (const grade in this.gradeCount) {
					categories.push(grade || '未知');
					series.push({
						name: grade || '未知',
						data: this.gradeCount[grade]
					});
				}
				
				this.chartData = {
					categories: categories,
					series: series
				};
			},
			// 显示选定年级的学生信息
			showStudents(grade) {
				this.selectedGrade = grade;
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css");
	
	.container {
		position: relative;
		min-height: 100vh;
		background-color: #f5f7fa;
		overflow: hidden;
	}
	
	.wave-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 120px;
		overflow: hidden;
		z-index: 0;
		
		svg {
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	
	.content {
		position: relative;
		z-index: 1;
		padding: 20px;
		padding-top: 40px;
	}
	
	.stats-card {
		background: linear-gradient(135deg, #4a8fe7, #6a5acd);
		border-radius: 16px;
		padding: 20px;
		margin-bottom: 20px;
		box-shadow: 0 4px 12px rgba(74, 143, 231, 0.2);
		color: white;
		text-align: center;
		
		.stats-title {
			font-size: 16px;
			display: block;
			margin-bottom: 5px;
		}
		
		.stats-value {
			font-size: 28px;
			font-weight: bold;
		}
	}
	
	.chart-container {
		width: 100%;
		height: 350px;
		background: white;
		border-radius: 16px;
		padding: 10px;
		box-shadow: 0 4px 12px rgba(0,0,0,0.05);
		margin-bottom: 20px;
	}
	
	.grade-container {
		background: white;
		border-radius: 16px;
		padding: 15px;
		margin-bottom: 20px;
		box-shadow: 0 4px 12px rgba(0,0,0,0.05);
	}
	
	.section-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		margin-bottom: 15px;
		display: block;
	}
	
	.grade-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}
	
	.grade-card {
		background: #f8f9fa;
		border-radius: 12px;
		padding: 15px 10px;
		text-align: center;
		transition: all 0.3s;
		
		&.active {
			background: linear-gradient(135deg, #4a8fe7, #6a5acd);
			color: white;
			box-shadow: 0 4px 8px rgba(74, 143, 231, 0.3);
		}
		
		.grade-name {
			font-size: 16px;
			font-weight: 500;
			display: block;
		}
		
		.grade-count {
			font-size: 14px;
			color: inherit;
			opacity: 0.8;
		}
	}
	
	.student-section {
		background: white;
		border-radius: 16px;
		padding: 15px;
		box-shadow: 0 4px 12px rgba(0,0,0,0.05);
	}
	
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
		
		.student-count {
			font-size: 14px;
			color: #666;
		}
	}
	
	.student-list {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	
	.student-card {
		display: flex;
		align-items: center;
		background: #f8f9fa;
		border-radius: 12px;
		padding: 12px 15px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	}
	
	.student-index {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background: #e9ecef;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 12px;
		
		text {
			font-size: 12px;
			color: #6c757d;
			font-weight: bold;
		}
	}
	
	.student-avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: linear-gradient(135deg, #4a8fe7, #6a5acd);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 12px;
		
		.avatar-text {
			color: #fff;
			font-size: 18px;
			font-weight: bold;
		}
	}
	
	.student-info {
		flex: 1;
		
		.name {
			display: block;
			font-size: 16px;
			font-weight: 500;
			color: #333;
			margin-bottom: 2px;
		}
		
		.phone {
			font-size: 12px;
			color: #6c757d;
		}
	}
	
	.status-badge {
		padding: 4px 10px;
		border-radius: 20px;
		font-size: 12px;
		font-weight: 500;
		
		&.paid {
			background: rgba(76, 175, 80, 0.15);
			color: #4CAF50;
		}
		
		&.unpaid {
			background: rgba(244, 67, 54, 0.15);
			color: #F44336;
		}
	}
	
	/* 动画效果 */
	.animate__animated {
		--animate-duration: 0.5s;
	}
</style>